<template>
  <el-dialog
    :title="dialogTitle"
    :visible.sync="dialogVisible"
    width="20%"
    :close-on-click-modal="false"
    :before-close="handleClose"
  >
    <div class="create-file-container">
      <div class="folder-path">
        <span>路径:</span>
        <el-link :underline="false">{{ getFolderPath }}</el-link>
      </div>
      <div class="folder-form">
        <el-form
          :model="modelForm"
          ref="modelForm"
          :rules="rules"
          label-width="100px"
        >
          <el-form-item label="名称:" prop="fileName">
            <el-input
              type="text"
              v-model="modelForm.fileName"
              placeholder="请输入名称"
            ></el-input>
          </el-form-item>
          <el-form-item label="类型:" prop="fileType">
            <el-select
              v-model="modelForm.fileType"
              placeholder="请选择"
              style="width: 100%"
            >
              <el-option
                v-for="(item, index) in this.$config.FILE_TYPE"
                :key="Number(index)"
                :label="item"
                :value="Number(index)"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="handleClose">取 消</el-button>
      <el-button type="primary" @click="handleConfirm">确 定</el-button>
    </span>
  </el-dialog>
</template>
<script>
import { createFile } from '@/api/linux/file'

export default {
  name: "CreateFile",
  props: {
    title: {
      type: String,
      default: () => "",
    },
    visible: {
      type: Boolean,
      default: () => false,
    },
    folderPath: {
      type: String,
      default: () => null,
    },
  },
  computed: {
    dialogTitle: {
      get() {
        return this.title;
      },
    },
    dialogVisible: {
      get() {
        return this.visible;
      },
    },
    getFolderPath: {
      get() {
        return this.folderPath;
      },
    },
  },
  data() {
    return {
      modelForm: null,
      initForm: {
        filePath: null,
        fileName: null,
        fileType: void 0,
      },
      rules: {
        fileName: [
          { required: true, message: "请输入名称", trigger: "blur, change" },
        ],
        fileType: [
          { required: true, message: "请输入名称", trigger: "blur, change" },
        ],
      },
    };
  },
  created() {
    this.modelForm = { ...this.initForm };
  },
  methods: {
    // 确定
    async handleConfirm() {
      this.$refs.modelForm.validate(async (valid) => {
        if (valid) {
          this.modelForm.filePath = this.getFolderPath
          await createFile({ ...this.modelForm });
          this.handleClose();
          this.$emit("success");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },

    // 关闭窗口
    handleClose() {
      this.modelForm = { ...this.initForm };
      this.$refs.modelForm.resetFields();
      this.$emit("update:visible", false);
    },
  },
};
</script>
<style lang="scss" scoped>
.create-file-container {
  width: 100%;
  overflow: hidden;

  .folder-path {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 20px;

    .el-link {
      margin-left: 10px;
      font-size: 20px;
      font-weight: bold;
      color: #409eff;
    }
  }

  .folder-form {
    width: 80%;
  }
}
</style>
